<template>
  <div class="back_img">
    <div class="login-container">
        <el-form :model="ruleForm2" :rules="rules2"
         status-icon
         ref="ruleForm2"
         label-position="left"
         label-width="0px"
         class="demo-ruleForm login-page">
            <h3 class="title">后台管理系统登录</h3>
            <el-form-item prop="username">
                <el-input type="text"
                    v-model="ruleForm2.username"
                    auto-complete="off"
                    placeholder="用户名"
                ></el-input>
            </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password"
                        v-model="ruleForm2.password"
                        auto-complete="off"
                        placeholder="密码"
                    ></el-input>
                </el-form-item>
            <el-checkbox
                v-model="checked"
                class="rememberme"
            >记住密码</el-checkbox>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
    </div>
</template>

<el-dialog
  title="提示"
  :visible.sync="handleSubmit"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="handleSubmit = false">取 消</el-button>
    <el-button type="primary" @click="handleSubmit = false">确 定</el-button>
  </span>
</el-dialog>

<script>
export default {
    data(){
        return {
            logining: false,
            ruleForm2: {
                username: '',
                password: '',
            },
            rules2: {
                username: [{required: true, message: 'please enter your account', trigger: 'blur'}],
                password: [{required: true, message: 'enter your password', trigger: 'blur'}]
            },
            checked: false
        }
    },
    methods: {

        //判断登录成功 进行跳转查询页面
        handleSubmit(event){
          debugger;
          var redirect = this;
          this.$axios.post('/admin/login', {
             username : this.ruleForm2.username,
             password : this.ruleForm2.password
            })
            .then(function (response) {

              if(response.data.status == 0){
                 redirect.$router.replace({path:'/tableMain'})
              }else{
                alert(response.data.msg);
              }
            })
            .catch(function (response) {
              alert(response.data.msg);
            });

        }
    }
};
</script>

<style scoped>
.login-container {
    width: 100%;
    height: 100%;
}
.login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
label.el-checkbox.rememberme {
    margin: 0px 0px 15px;
    text-align: left;
}
.back_img {
    /*设置组件化背景图片*/
    background: url('../assets/img/headerLogo.png') center center no-repeat;
  }
</style>
